<template>
  <div class="survey">
    <div class="content">
      <router-view ref="childview"
      @choose='choose'
      :type='active'
      @hasPic='hasPic'
      :pic='pic'
      :survey='survey'
      @addQuestion="addQuestion"></router-view>
    </div>
    <footer>
      <div class="func">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-gouhao"></use>
        </svg>
        <span>保存草稿</span>
      </div>
      <div class="next" :style="{backgroundImage: 'url(/static/images/bottomAc.png)'}" @click="next">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-youjiantou"></use>
        </svg>
        <span>下一步</span>
      </div>
      <div class="func" @click="doSort">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zhizhang2"></use>
        </svg>
        <span>整理</span>
      </div>
    </footer>
    <div v-if="sort && survey.questionList.length != 0" class="sort" id="sort">
      <p class="cancel" @click="cancel">取消</p>
      <div class="q">
        <draggable v-model="survey.questionList">
          <div v-for="(value, index) in survey.questionList" :key="index"
          class="list">
            <div class="delete" @click="doDelete($event)">一</div>
            <div class="preview" @click="cancelDel($event)"></div>
            <p class="q-name" @click="cancelDel($event)">{{value.questionName}}</p>
            <div class="q-er" @click="cancelDel($event)"></div>
            <div class="del" @click="deleteQues(index)">删除</div>
          </div>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'survey',
  data () {
    return {
      vuegConfig: {
        disable: false,
        forwardAnim: 'slideInUp',
        backAnim: 'slideIndown'
      },
      active: -1,                // 题型控制
      pic: false,                // true有图false无图
      survey: {
        name: '',
        imgUrl: '',
        personNum: 0,
        personTypeId: 0,
        questionList: [],
        type: 0
      },                         // 问卷数据存放
      sort: true                // 整理
    }
  },
  components: {
    draggable
  },
  methods: {
    next () {
      this.$refs.childview.next()
    },                           // 下一步，实际调用子组件中的next方法
    choose (index) {
      this.active = index
    },                           // 选择题型
    hasPic (flag) {
      this.pic = flag
    },                           // 选择有图还是无图
    addQuestion (question) {
      console.log(this.survey)
      this.survey.questionList.push(question)
    },                           // 添加题目进问卷
    doSort () {
      if (this.survey.questionList.length > 0) {
        this.sort = true
        setTimeout(() => {
          document.getElementById('sort').className = 'sort active'
        }, 100)
      }
    },
    cancel () {
      document.getElementById('sort').className = 'sort'
      setTimeout(() => {
        this.sort = false
      }, 1000)
    },
    doDelete (e) {
      e.target.parentNode.style.transform = 'translateX(-180px)'
    },
    cancelDel (e) {
      e.target.parentNode.style.transform = 'translateX(0)'
    },
    deleteQues (index) {
      this.survey.questionList.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.survey {
  background-color: #fff;
  display: flex;
  height: 100vh;
  flex-direction: column;
  overflow: hidden;
}
.content {
  flex: 1;
  overflow: auto;
}
footer {
  z-index: 9;
  flex: none;
  height: 100px;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .icon {
    color: #999;
    width: 44px;
    height: 44px;
  }
  span {
    font-size: 20px;
    color: #999;
  }
  .func {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .next {
    width: 140px;
    height: 117px;
    background-size: cover;
    text-align: center;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #5d331e;
    .icon {
      color: #5d331e;
    }
    span {
      color: #5d331e;
    }
  }
}
.sort {
  display: flex;
  flex-direction: column;
  transition: transform 0.4s;
  transform: translateY(100%);
  position: fixed;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #fff;
  &.active {
    transform: translateY(0);
  }
  .cancel {
    color: #007aff;
    font-size: 32px;
    flex: none;
    height: 40px;
    border-bottom: 2px solid #e5e5e5;
    padding: 20px;
  }
  .q {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    .list {
      width: 100vw;
      position: relative;      
      height: 240px;
      border-bottom: 2px solid #999;
      display: flex;
      align-items: center;
      transition: transform 0.8s;
      &.active {
        transform: translateX(-180px);
      }
    }
    .delete {
      flex: none;
      width: 44px;
      height: 44px;
      background-color: #cd5c5c;
      border-radius: 50%;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 25px;
    }
    .preview {
      flex: none;
      height: 138px;
      width: 84px;
      border: 2px solid #ccc;
      margin-left: 30px;
    }
    .q-name {
      flex: 1;
      font-size: 36px;
      color: #666;
      margin-left: 25px;
    }
    .q-er {
      flex: none;
      width: 45px;
      height: 10px;
      border-top: 4px solid #333;
      border-bottom: 4px solid #333;
      margin: 0 30px;
    }
    .del {
      position: absolute;
      top: 0;
      right: 0;      
      width: 180px;
      height: 100%;
      background-color: #cd5c5c;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 36px;
      transform: translateX(180px);
    }
  }
}
</style>
